<script>
import profile from "@/components/Profile";
import { getToken, getDicMap } from "@/utils/storage";
import { logoutApi } from "./api";
import { useTzRouter } from "@/vhooks/useTzRouter";

export default {
  name: "Mine",
  components: { profile },
  setup() {
    let menuList = [
      {
        title: "常见问题",
        url: "/pages/subUser/webPage/index",
        query: {
          url: "https://mp.weixin.qq.com/s/umEz061_o-mabzZ5NPWdxg",
          title: "常见问题",
        },
      },
      {
        title: "操作指南",
        url: "/pages/subUser/webPage/index",
        query: {
          url: "https://mp.weixin.qq.com/s/zFOxVQC4hSdjjX0uTsNvng",
          title: "操作指南",
        },
      },
    ];

    const { userType } = getDicMap();
    if (userType.isPersonal) {
      menuList = [
        {
          title: "修改密码",
          url: "/pages/subUser/setPwd/index",
        },
        ...menuList,
        {
          title: "消费记录",
          url: "/pages/subUser/bill/index",
        },
      ];
    }

    const { reLaunch, navigateTo } = useTzRouter();
    const handleClick = (url, query) => {
      if (!url) return;
      navigateTo({
        path: url,
        query,
      });
    };

    const logout = () => {
      const params = {
        token: getToken(),
      };
      logoutApi(params).then(() => {
        reLaunch({
          path: "/pages/login/index",
        });
      });
    };

    return () => {
      return (
        <tz-view class="mine">
          <profile></profile>
          <tz-form>
            {menuList.map((item) => (
              <tz-cell
                key={item.path}
                title={item.title}
                onClick={() => handleClick(item.url, item.query)}
              >
                <tz-view class="link-area">
                  <tz-icon name="arrow-right"></tz-icon>
                </tz-view>
              </tz-cell>
            ))}
          </tz-form>
          <tz-view onClick={logout} class="logout-btn">
            安全退出
          </tz-view>
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.mine {
  display: flex;
  flex-direction: column;
  align-items: center;

  .tz-form {
    width: 100%;
    .tz-cell {
      margin-top: 5px;
      background: $white;
      padding: 0 15px;
      .tz-cell-value {
        justify-content: flex-end;
        .tz-icon {
          font-size: 16px;
        }
      }
      &:not([disabled]):active {
        opacity: 0.7;
      }
    }
  }
  .logout-btn {
    width: 100%;
    margin-top: 5px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $white;
    cursor: pointer;

    &:active {
      background-color: $hover-color;
    }
  }
}
</style>
